import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import "./css/index.css"

/* 
  编程式路由导航-useNavigate
  * 有的时候,我们并不是一点击就导航跳转,而是需要判断或者其他操作之后再跳转
  * useNavigate提供了一个方法,方法内部可以直接传递路由地址,专门让我们进行编程式路由导航

*/

export default function Home() {
  const navigate = useNavigate()
  // console.log(navigate);
  return (
    <div id='Home'>
      <h1>HOME</h1>
      <div>
        <button onClick={()=>{
          navigate('/home/game')
        }}>游戏列表</button>
        <button onClick={()=>{
          navigate('/home/news')
        }}>新闻列表</button> 
        <button onClick={()=>{
          navigate('/home/music')
        }}>音乐列表</button>
      </div>
      <div>
        <button onClick={() => {
          navigate(-1)
        }}>倒回去1</button>
        <button onClick={() => {
          navigate(1)
        }}>前进1</button>
        <button onClick={() => {
          navigate(2)
        }}>前进2</button>
      </div>
      {/* 在某个路由组件中，使用Outlet组件进行占位，方便将来展示子路由 */}
      <Outlet />
    </div>
  )
}